<template>
	<view class="houseMessage">
		<view class="message">
			<view class="top">
				房屋信息
			</view>
			<view class="bottom">
				{{title}}
			</view>
		</view>
		<view class="proprietor">
			<view class="title">
				业主信息
			</view>
			<view class="conent">
				<u--form ref="form1" labelWidth='104' :model="userInfo" :rules="rules">
					<u-form-item label="姓名" borderBottom ref="item1">
						<u--input v-model="userInfo.name" border="none" placeholder="请填写您的真实姓名"></u--input>
					</u-form-item>
					<u-form-item label="性别" borderBottom ref="item1">
						<u-radio-group v-model="userInfo.gender" placement="row">
							<u-radio activeColor="#5591AF" label="男" name="1"></u-radio>
							<u-radio activeColor="#5591AF" label="女" name="0"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item prop="mobile" ref="item1" borderBottom label="手机号">
						<u--input v-model="userInfo.mobile" placeholder-style="color:#979797" placeholder="请输入手机号"
							border="none">
						</u--input>
						<block slot="right">
							<u-count-down @finish="onFinish" v-if="isShowCountDown" :time="60 * 1000" format="ss s">
							</u-count-down>
							<view v-else @click="getCode" class="code-btn">获取验证码</view>
						</block>
					</u-form-item>
					<u-form-item prop="code" ref="item1" borderBottom label="验证码">
						<u--input maxlength="6" v-model="userInfo.code" placeholder-style="color:#979797"
							placeholder="请输入6位验证码" border="none">
						</u--input>
					</u-form-item>

				</u--form>


			</view>
			<life-button icon="/static/icon/check.png">提交审核</life-button>
		</view>
		<!-- 模拟短信提示 -->
		<u-notify @click.native="copyCode" ref="uNotify"></u-notify>
		<view class="dated">
			<view class="textend">
				上传本人身份证照片
			</view>
			<view class="textad">
				请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。
			</view>
		</view>
		<view class="boxend">
			<u-upload>
				<image src="/static/icon/add.png" mode=""></image>
				<text>上传人像面照片</text>
			</u-upload>
			<u-upload>
				<image src="/static/icon/add.png" mode=""></image>
				<text>上传国徽面照片</text>
			</u-upload>
		</view>
		<view class="ender">

		</view>
	</view>
</template>

<script>
	import {
		sendCode,
	} from '@/api/login.js'
	export default {
		data() {
			return {
				title: null,
				userInfo: {
					point: '',
					building: '',
					room: '',
					name: '',
					gender: '',
					mobile: '',
					idcardFrontUrl: '',
					idcardBackUrl: ''
				},
				isShowCountDown: false,
				code: null,
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
							message: '手机号码格式不正确',
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		methods: {
			async getCode() {
				// 校验手机号
				this.$refs.form1.validateField('mobile', async (errRes) => {
					if (errRes.length) return
					const res = await sendCode(this.userInfo.mobile)
					console.log(res)
					const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
					this.code = res.data.code
					// 短信提示
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						message: message,
						duration: 1000 * 6,
						fontSize: 14
					})
					this.isShowCountDown = true
					// 震动
					uni.vibrateLong()
					// 显示倒计时

				})
			},
			copyCode() {
				uni.setClipboardData({
					data: this.code
				})
			},
			onFinish() {
				this.isShowCountDown = false
			},
		},
		onLoad(options) {
			this.title = options.title
		}
	}
</script>

<style scoped lang="scss">
	.houseMessage {
		width: 100%;
		height: 100%;
		background: #fafafa;

		.message {

			.top {
				height: 86rpx;
				display: flex;
				align-items: center;
				color: #979797;
				font-size: 24rpx;
				text-align: center;
				padding: 0 30rpx;
			}

			.bottom {

				box-sizing: border-box;
				background: #fff;
				height: 102rpx;
				width: 100%;
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 28rpx;
				padding: 0 30rpx;

			}

		}

		.proprietor {

			width: 100%;
			background: #FFFFFF;

			.title {

				box-sizing: border-box;
				height: 86rpx;
				display: flex;
				align-items: center;
				color: #979797;
				font-size: 24rpx;
				text-align: center;
				padding: 0 30rpx;
				background: #fafafa;
			}

			.conent {
				padding: 0 30rpx;

				::v-deep .u-form-item {
					height: 102rpx;

				}

				::v-deep .u-radio {
					margin-right: 60rpx;
				}

				::v-deep .u-form-item__body__left__content__label {
					font-size: 28rpx;
				}

				::v-deep .u-form-item__body {
					height: 62rpx;
				}

				.code-btn {
					color: #5591AF;
					font-size: 28rpx;
				}
			}
		}
	}

	.dated {
		background-color: #FFFFFF;
		font-size: 28rpx;
		height: 135rpx;
		margin-top: 30rpx;
		border-bottom: 1px solid #F2F2F6;

		.textend {
			color: #333333;
			line-height: 30px;
			margin-left: 30rpx;
		}

		.textad {
			font-size: 22rpx;
			color: #C3C3C5;
			margin-left: 30rpx;
		}

	}

	.boxend {
		background: #FFFFFF;
		height: 750rpx;
		padding: 20rpx 30rpx;
		text-align: center;

		::v-deep.u-upload {
			width: 690rpx !important;
			height: 340rpx !important;
			margin-bottom: 20rpx !important;

			.u-upload__wrap {


				view {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					background-color: #fafafa;
					border-radius: 10px;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-top: 15rpx;
					color: #7694B0;
					font-size: 30rpx;
					text-align: center;

				}
			}
		}


	}



	.ender {
		height: 275rpx;
		background: #fafafa;
	}
</style>
